<template>
	<view class="chat-container">
		<view class="cu-chat">
			<scroll-view
				scroll-y="true"
				@click="resetData"
				:scroll-into-view="scrollToView"
				:scroll-with-animation="false"
				:style="{ height: scrollViewHeight }"
			>
				<template v-for="(item, index) in messageList">
					<view
						class="cu-item self"
						v-if="item.userId === userInfo.id"
						:id="'message' + item.id"
						:key="item.id"
					>
						<view class="main">
							<view class="content bg-green shadow">
								<text>{{ item.content }}</text>
							</view>
						</view>
						<view class="cu-avatar radius" style=""></view>
						<view class="date">2018年3月23日 13:23</view>
					</view>
					<view class="cu-item" v-else :id="'message' + item.id" :key="item.id">
						<view class="cu-avatar radius" style=""></view>
						<view class="date">2018年3月23日 13:23</view>
						<view class="main">
							<view class="content shadow">
								<text>{{ item.content }}</text>
							</view>
						</view>
					</view>
				</template>
			</scroll-view>
		</view>
		<!-- 底部输入框 -->
		<view class="cu-bar foot input" :style="{ bottom: `${keyboardHeight}rpx` }">
			<view class="action"><text class="cuIcon-sound text-grey" style="font-size: 58rpx;"></text></view>
			<view class="textarea-box">
				<!-- TODO 使用hold-keyboard似乎是一个可行的方案，后面有时间再试 -->
				<textarea
					ref="textareaRef"
					v-model="content"
					auto-height
					:fixed="true"
					:focus="textareaFocus"
					:maxlength="300"
					:cursor-spacing="15"
					:confirm-hold="true"
					:show-confirm-bar="false"
					:adjust-position="false"
					@focus="showMore = false"
					@linechange="handleLineChange"
				></textarea>
			</view>
			<view class="action"><text class="cuIcon-emojifill text-grey" style="font-size: 58rpx;"></text></view>
			<view class="more" style="margin-left: 20rpx;" v-show="content === ''" @click="handleShowMore">
				<uv-icon name="plus-circle" size="33"></uv-icon>
			</view>
			<button v-show="content !== ''" class="cu-btn bg-green shadow" @click.stop="sendMessage">发送</button>
		</view>

		<!-- 更多功能视图 -->
		<view class="more-view-container" v-show="showMore">
			<view class="more-view" :class="{ border: showMore }" :style="{ height: `${keyboardHeight}rpx` }">
				<view class="action-item">
					<view class="wrap">
						<view class="icon"><text class="yzb label-icon yzb-mianshiyaoqing"></text></view>
						<text style="font-size: 24rpx;">投递简历</text>
					</view>
				</view>
				<view class="action-item">
					<view class="wrap">
						<view class="icon"><text class="yzb label-icon yzb-dianhua1"></text></view>
						<text style="font-size: 24rpx;">通话</text>
					</view>
				</view>
				<view class="action-item">
					<view class="wrap">
						<view class="icon"><text class="yzb label-icon yzb-dizhi"></text></view>
						<text style="font-size: 24rpx;">位置</text>
					</view>
				</view>
				<view class="action-item">
					<view class="wrap">
						<view class="icon"><text class="yzb label-icon yzb-jibenxinxi"></text></view>
						<text style="font-size: 24rpx;">名片</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import socketManager from '@/utils/websocket.js';
import { unitConvert } from '@/utils/index.js';

export default {
	data() {
		return {
			keyboardHeight: 0, // 键盘高度
			textareaHeight: 0, // 文本框高度
			scrollToView: '', // 滚动到元素的ID
			showMore: false, // 显示更多功能
			loseFocus: false, // 失去焦点
			textareaFocus: false, // 文本框焦点
			userId: '', // 用户ID
			friendId: '', // 朋友ID
			content: '' // 聊天内容
		};
	},
	computed: {
		...mapState(['userInfo', 'activeRoom', 'friendGather']),
		// 获取聊天列表
		messageList() {
			const friend = this.friendGather.find(item => item.id === this.activeRoom);
			if (friend) {
				this.showLastMessage();
				return friend.messages;
			}
			return [
				{ id: 1, content: '在吗' },
				{ id: 2, content: '在吗' },
				{ id: 3, content: '在吗' },
				{ id: 4, content: '在吗' },
				{ id: 5, content: '在吗' },
				{ id: 6, content: '在吗' },
				{ id: 7, content: '在吗' },
				{ id: 8, content: '在吗' },
				{ id: 9, content: '在吗' },
				{ id: 10, content: '在吗' },
				{ id: 11, content: '借五百块钱' }
			];
		},
		// 获取好友信息
		friend() {
			const friend = this.friendGather.find(item => item.id === this.activeRoom);
			if (friend) {
				return { nickname: friend.nickname, avatar: friend.avatar };
			}
			return {};
		},
		// 滚动视图高度
		scrollViewHeight() {
			this.scrollToView = '';
			this.showLastMessage();
			return `calc(100vh - ${this.textareaHeight + this.keyboardHeight}rpx)`;
		}
	},
	onLoad(option) {
		this.userId = option.userId;
		this.friendId = option.friendId;
		this.connection();

		// 获取键盘高度
		uni.onKeyboardHeightChange(res => {
			if (!this.loseFocus) {
				this.keyboardHeight = unitConvert(res.height);
			}
		});
	},
	methods: {
		// 建立私聊
		connection() {
			const { userId, friendId } = this;
			const socket = socketManager.getSocket();
			socket.emit('joinFriendSocket', { userId, friendId });
		},
		// 发送消息
		sendMessage() {
			this.loseFocus = true;
			const { userId, friendId, content } = this;

			if (this.content.trim() !== '') {
				const socket = socketManager.getSocket();
				socket.emit('friendMessage', { userId, friendId, content });
				this.content = '';
				this.textareaFocus = true;
				// this.$nextTick(() => {
				// 	this.textareaFocus = true;
				// });
			}
		},
		// 显示更多功能
		handleShowMore() {
			this.showMore = !this.showMore;
			this.loseFocus = true;
			// 显示更多功能时让文本框失去焦点
			if (this.showMore) {
				this.textareaFocus = false;
				// 如果是第一次点击则赋予一个高度
				if (this.keyboardHeight === 0) {
					this.keyboardHeight = 540;
				}
			} else {
				this.textareaFocus = true;
			}
		},
		// 重置数据
		resetData() {
			this.keyboardHeight = 0;
			this.showMore = false;
			this.loseFocus = false;
			this.textareaFocus = false;
		},
		// 获取发送框高度
		handleLineChange() {
			this.$nextTick(() => {
				let query = uni.createSelectorQuery();
				query.select('.cu-bar').boundingClientRect();
				query.exec(res => {
					this.textareaHeight = unitConvert(res[0].height);
				});
			});
		},
		// 滚动到最后一条消息
		showLastMessage() {
			this.$nextTick(() => {
				const index = this.messageList.length - 1;
				if (this.messageList[index] && this.messageList[index].id) {
					this.scrollToView = 'message' + this.messageList[index].id;
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.cu-bar {
	padding: 20rpx 0;
	padding-right: 20rpx;
	align-items: flex-end;
	background-color: #f5f5f5 !important;
	.textarea-box {
		width: 80%;
		padding: 16rpx 0;
		border-radius: 6rpx;
		background-color: #fff;
		textarea {
			width: 100%;
			font-size: 16px;
			padding-left: 10rpx;
			background-color: #fff;
		}
	}
	.cu-btn {
		width: 132rpx;
		margin-left: 10px;
	}
}

.more-view.border {
	border-top: 1rpx solid #e4e7ed;
}

.more-view {
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	justify-content: space-evenly;
	width: 100%;
	padding: 60rpx 0;
	box-sizing: border-box;
	background-color: #f5f5f5;
	.wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.icon {
		width: 96rpx;
		height: 90rpx;
		padding: 23rpx;
		border-radius: 10rpx;
		margin-bottom: 6rpx;
		background-color: #fff;
		.label-icon {
			font-size: 24px;
		}
	}
}
</style>
